<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background-color: #45dfff}
	#c1 {background-color: #fff;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');
		/*
			像素：
				1) getImageData(x, y, w, h)	获取图像数据					----需要先创建图像
				该方法下可以获得的属性：（一定是它下面的方法）
					width
					height
					data
				2) putImageData(获取图像, x, y)		设置新的图像数据 		----需要先创建图像
		*/
		oGC.fillRect(0, 0, 100, 100);

		var oImg = oGC.getImageData(0, 0, 100, 100);

		// alert(oImg.width);			//100  一行的像素个数   			 数值类型
		// alert(oImg.height);			//100   一列的像素个数   			 数值类型
		// alert(oImg.data);			//一个数组，整体像素的数组集合   	 数组
		// alert(oImg.data.length);	//4000

		//为什么不是10000，因为每1个像素由4组数据(rgba--即red/green/blue/alpha(三原色))所构成
		// alert(oImg.data[0]);	// 0-255  黑色到白色
		// alert(oImg.data[1]);	// 0-255  黑色到白色
		// alert(oImg.data[2]);	// 0-255  黑色到白色
		// alert(oImg.data[3]);	// 0-255  透明到不透明

		for (var i = 0; i < oImg.width*oImg.height; i++) {			//长度不是oImg.data.length，应该以每一个像素作为i
			oImg.data[4*i] = 255;
			oImg.data[4*i+1] = 0;
			oImg.data[4*i+2] = 0;
			oImg.data[4*i+3] = 255;
		};

		oGC.putImageData(oImg, 100, 100);		//这里引用的是旧的图像对象，也可以再新建一个图片对象
	}
	</script>
</head>
<body>
	<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>